/**
 * Created by zhr on 2017/6/27.
 */
import React from "react";
import { Table,message } from 'antd';
import { Button } from 'fly';
import Relay from 'react-relay';
import { hashHistory } from 'react-router';
import HeaderTab from './components/headerTab';
import ProofingProgressDetail from './proofing_progress_detail';
import SampleSchduleMutation from './mutation/SampleSchduleMutation';
import './css/style.css';
export default class Progress extends React.Component {
    constructor() {
        super();
        this.state = {
            start: 1,
            samplePlanModels:[],
            GoodsSamplePlan:[],
            fileJson:[],
            mark: '',
            isNone: true,
            currentInx: 0,
            hasSize: false,
            arrowLeft:'55px'
        }
        // this.fileDownload = this.fileDownload.bind(this);
        this.sampleId = null;
        this.scId = null;
        this.deliveryDate = null;
        this.name = null;
    }
    componentWillMount() {
        this.getSampleSchdule()
    }
    getSampleSchdule() {
        Relay.Store.commitUpdate(
            new SampleSchduleMutation({
                orderId: this.props.orderId
            }),
            {
                onFailure: () => {
                    message.error('请求失败')
                },
                onSuccess: (response) => {
                    let errorCode = response.sampleSchdule.responseData.errorCode;
                    if(errorCode=='0'){
                        let data = response.sampleSchdule.responseData;
                        data.samplePlanModels != null && (
                            this.setState({isNone: true})
                        )
                        this.setState({
                            samplePlanModels: data.samplePlanModels,
                            GoodsSamplePlan: data.GoodsSamplePlan,
                            fileJson: JSON.parse(data.fileJson),
                            mark: data.mark
                        })
                    } else {
                        message.error('请求失败')
                    }
                }
            }
        )
    }
    //资料下载
    fileDownload(v) {
        // Array.isArray(JSON.parse(v)) && JSON.parse(v).forEach((i, k) => {
            const h = v.url, a = document.createElement("a");
            a.href = h;
            a.setAttribute("download", "");
            a.click();
        // });
    }
    //查看详情
    showDetail(currentInx,hasSize,arrowLeft) {
        //计划交期，产前样
        this.sampleId  = this.state.samplePlanModels[currentInx].sampleId;
        this.scId  = this.state.samplePlanModels[currentInx].scId;
        this.deliveryDate = this.state.samplePlanModels[currentInx].deliveryDate;
        this.name = this.state.samplePlanModels[currentInx].name;
        this.setState({
            start: 2,
            currentInx,
            hasSize,
            arrowLeft,
        })
    }
    //返回初始页
    back() {
        this.setState({
            start: 1
        },()=>{
            this.refs.headertab.setState({
                currentInx:this.state.currentInx,
                hasSize: this.state.hasSize,
                arrowLeft: this.state.arrowLeft,
            })
            this.getSampleSchdule()
        })
    }
    render() {
        return (
            <div>

                {
                    this.state.start == 1 ? (
                        this.state.samplePlanModels != '' && this.state.samplePlanModels != null ? (
                            <div>
                                <HeaderTab
                                    samplePlanModels={this.state.samplePlanModels}
                                    ref={'headertab'}
                                    showDetail={this.showDetail.bind(this)}
                                />
                                <div className="cp_header_tab_content">
                                    <span>备注：</span>
                                    <span>{this.state.mark || '无'}</span>
                                </div>
                                <div className="cp_header_tab_content">
                                    <span>资料：</span>
                                    <span>
                                        {
                                            this.state.fileJson && this.state.fileJson.length && this.state.fileJson.length >= 1 ? (
                                                this.state.fileJson.map((v,i)=>{
                                                    return (
                                                        <span className="settlementView_for">
                                                          <a>{v.name}</a>
                                                            {
                                                                v.response ? (<a onClick={this.fileDownload.bind(this,v)}>下载</a>) : null
                                                            }
                                                        </span>)
                                                })
                                            ) : '无'
                                        }
                                    </span>
                                </div>
                            </div>
                        ) : (
                            <div className="proofing_progress_none">
                                <img src={require("./img/kong.png")} alt=""/>
                                <span>暂未开始打样</span>
                            </div>
                            )
                    ) : (
                        <div style={{marginBottom:'20px'}}>
                            <ProofingProgressDetail
                                sampleId={this.sampleId}
                                scId={this.scId}
                                deliveryDate={this.deliveryDate}
                                name={this.name}
                                isPartA={this.props.isPartA}
                                partA={this.props.partA}
                                back={this.back.bind(this)}
                                orderClassify={this.props.orderClassify}
                            />
                        </div>
                    )
                }

            </div>
        )

    }
}